<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<style>
    #box{
        width: 900px;
        height: 600px;
        margin: auto;
    }
</style>
<body>
<div style="height: 100px"></div>
<div id="box">
    <button type="button" class="btn btn-info" onclick="ins()">添加学生信息</button>
    <form class="form-inline " id="toolbar" onsubmit="return false">
        <input type="text" class="form-control mb-2 mr-sm-2" id="customer"  placeholder="请输入学号">
        <button type="button" id="btn_query" class="btn btn-info">搜索</button>
    </form>

    <table id="mytab" class="table table-hover"></table>
</div>
<div id="tool"></div>
</body>
<script>
    var val=0;
    //默认渲染一次
    xuanRan(val);

    //点击事件渲染一次
    $('#btn_query').click(function (){
        val=$('#customer').val();
        val= val.length==0?0:val;
        //销毁原来的内容
        $('#mytab').bootstrapTable('destroy');
        //创建新内容
        xuanRan(val);
    })





    //渲染表格
    function xuanRan(val) {
        $("#mytab").bootstrapTable({
            method:"get",
            url:"/getJson/"+val,
            pageNum:1,
            pagination:true,
            sidePagination: "client",
            toolbar:"#tool",
            toolbar:"#toolbar",
            columns:[
                {
                    title:"学生ID",
                    field:"id"
                },
                {
                    title:"生日",
                    field:"birthday"
                },
                {
                    title:"学生状态",
                    field:"studentStatus"
                },
                {
                    title:"班级",
                    field:"classFrom"
                },
                {
                    title:"电话",
                    field:"phone"
                },
                {
                    field: 'operate',
                    title: '操作',
                    align: 'center',
                    valign: 'middle',
                    width: 200,
                    //按钮事件绑定
                    events: {
                        //弹窗
                        // 'click #edit': function (e, value, row, index) {
                        //     $('#id').val(row.Id);
                        //     $('#name').val(row.Name);
                        //     $('#gender').val(row.Gender);
                        //     $('#age').val(row.Age);
                        // },
                        'click #delete': function (e, value, row, index) {
                            deleteInfo(row.id);
                        }
                    },
                    formatter: function (value, row, index) {
                        var result = "";
                        // result += '<button id="edit" class="btn btn-info" data-toggle="modal" data-target="#editModal">编辑</button>';
                        result += '<button id="delete" class="btn btn-danger" style="margin-left:10px;">删除</button>';
                        return result;
                    }
                }
            ]
        });
    }

    // 删除信息
    function deleteInfo(id) {
        console.log(id);
        $.ajax({
            type: 'post',
            url: '/del',
            dataType: 'text',
            data: {
                id: id
            },
            success: function (data) {
                console.log(data)
                if (data == 'Yes') {
                    console.log("删除成功")
                    $('#mytab').bootstrapTable('refresh');
                }
                else {
                    alert('删除失败');
                }
            }
        })
    }
    //添加
    function ins() {
        window.location.href="/toSub";
    }
</script>

</html>